import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button, List } from 'tea-component';
import { ListItemContent2, ListItemTitle } from '@src/components/common-compinents';
import { useHistory } from 'react-router-dom';
import * as actionTypes from '@src/model/actionType';
import { openWindow, getQueryVariable } from '@src/utils/index';

export default function BestNewTransaction(props) {
  const chainId = decodeURIComponent(getQueryVariable('chainid') || '');
  const history = useHistory();
  // @ts-ignore
  const homeStore = useSelector((state) => state.homeReducer);

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({ type: actionTypes.fetchLatestTxList, params: { ChainId: chainId } });
  }, [dispatch]);

  return (
    <div
      style={{
        width: '495px',
        padding: '17px 21px',
        backgroundColor: '#ffffff',
        boxSizing: 'border-box',
        border: '1px solid #DDDDDD',
      }}
    >
      <h6
        style={{
          fontSize: '14px',
          fontFamily: 'MicrosoftYaHei-Bold',
          color: '#333333',
          position: 'relative',
        }}
      >
        最新交易
        <Button
          type="link"
          style={{
            fontSize: '12px',
            fontFamily: 'MicrosoftYaHei',
            color: '#006EFF',
            position: 'absolute',
            right: '0px',
          }}
          onClick={() => {
            openWindow(`/tslist?chainid=${encodeURIComponent(chainId)}`);
          }}
        >
          更多
        </Button>
      </h6>
      <List split="divide" style={{ height: '350px', overflow: 'auto' }}>
        <ListItemTitle name="交易信息" time="创建时间"></ListItemTitle>
        {homeStore.latestTxList.GroupList.map((value, index) => {
          return <ListItemContent2 {...value} key={index} chainId={chainId}></ListItemContent2>;
        })}
      </List>
    </div>
  );
}
